<template>
  <!-- 这里的绑定before-close不需要(),否则是立即执行 -->
   <el-dialog
    title="添加剧目"
    :visible.sync="addShowVisible"
    width="80%"
    ref="addshowdialog"
    :before-close="closedialog"
    >
    <el-form :model="addShowForm" ref="addShowFormRef" :inline="true">
      <el-divider>剧目基本信息</el-divider>
        <el-row>
          <el-col :span="10">
             <el-form-item prop="showName" label="剧目名称" >
               <el-input prefix-icon="el-icon-user-solid" v-model="addShowForm.showName"></el-input>
             </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item prop="theaterName" label="演出地点" >
                <el-cascader
                  v-model="hall"
                  :options="locations"
                  @change="gettheater()">
                </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item prop="date" label="演出时间" >
              <el-date-picker
                type="dates"
                v-model="addShowForm.date"
                placeholder="选择一个或多个日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
             <el-form-item prop="type" label="剧目类型" >
               <el-input prefix-icon="el-icon-user-solid" v-model="addShowForm.type"></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="10">
             <el-form-item prop="priceRange" label="价格分区" >
               <el-input
               prefix-icon="el-icon-document"
               v-model="showPrice"
               placeholder="以逗号分隔"
               @change="getpricearr()"
               @focus="getoldpricearr()"
               @input="replaceprice()"></el-input>
             </el-form-item>
          </el-col>
        </el-row>
      <el-divider>剧目价格区间</el-divider>
        <div class="hallmask" ref="hallmask" v-show="seatSize ? false : true">
          <div>
            请选择演出厅
          </div>
        </div>
      <addshowseatmap
      :hallInfo="hallInfo"
      :seatSize="seatSize"
      :currentclass="currentclass"
      :canaddshowinfo="canaddshowinfo"
      :showinfo="addShowForm"
      :price="addShowForm.priceRange"
      ></addshowseatmap>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closedialog()">取 消</el-button>
      <el-button type="primary" @click="closedialog()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 导入子组件
import addshowseatmap from './addshowseatmap'
// 导入网络请求
import { getLocations, postshowseatmap, postnewshowinfo } from '../../../network/showManage'
// 导入mockjs
let Mock = require('mockjs')
let Random = Mock.Random
export default {
  name: 'addshowdialog',
  components: { addshowseatmap },
  props: {
    addShowVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 添加剧目表单
      addShowForm: {
        'id': Random.guid(),
        'showName': '',
        'date': [],
        // 演出厅名称
        'hall': '',
        // 剧院拼音缩写
        'theater': '',
        // 剧院名称
        'theaterName': '',
        'type': '',
        'priceRange': [],
        'pricemap': [],
        'price': ''
      },
      // 演出地点级联选择器
      locations: [],
      // 演出价格
      showPrice: '',
      // 原价格区间
      oldShowPrice: '',
      // 演出价格区间
      pricemap: [],
      // 演出地点
      hall: [],
      // 当前演出厅详细信息
      hallInfo: {},
      // 当前选中的座位等级
      currentclass: -1,
      // 对话框座位显示区域大小
      seatMapSize: '',
      // 对话框中座位的大小
      seatSize: '',
      // 当前是添加剧目标识符
      canaddshowinfo: false
    }
  },
  watch: {
    addShowVisible () {
      if (this.addShowVisible === true) {
        this.canaddshowinfo = true
        console.log(this.canaddshowinfo)
      }
      this.$nextTick(() => {
        this.getseatmapwidth()
      })
    },
    // 监听级联选择器的变化，要重新更新数据
    locations () {
      this.addShowForm.pricemap = []
    }
  },
  methods: {
    // 当剧目价格input修改的时候，这个字符串要重新处理成数组形式并且给到showinfo
    // 同时还要根据这个input的值修改showinfo中的pricemap数据，删除对应的数据
    getpricearr () {
      if (this.showPrice !== '') {
        // 旧的input价格数组转换成数字数组并且排序
        let oldarr = this.oldShowPrice.split(',')
        for (let i = 0; i < oldarr.length; i++) {
          oldarr[i] = oldarr[i] * 1
        }
        oldarr.sort((a, b) => { return a - b })
        // 新的input数据转换成数组
        let arr = this.showPrice.split(',')
        // 转换成数字数组
        for (let i = 0; i < arr.length; i++) {
          arr[i] = arr[i] * 1
        }
        // 因为进行了更改，所以会对arr进行重新排序，使用sort()
        arr.sort((a, b) => { return a - b })
        // 重新传给输入框
        this.showPrice = arr.join(',')
        // 重新造一个数组对象赋值给priceRange
        let newarr = []
        // 分为3种情况
        if (oldarr.length > arr.length) {
        // 情况1 oldShowPrice > showPrice 代表是删除了数据
          console.log('删除了价格等级')
          // 创建新的price
          for (let i = 0; i < arr.length; i++) {
            let newprice = {}
            newprice.class = i
            newprice.price = arr[i]
            newarr.push(newprice)
          }
          // 把生成的新数组放入priceRange
          this.addShowForm.priceRange = newarr
          // 根据这个newarr来生成新的pricemap
          // 要区这个数据是添加了数据还是删除了数据
          let newpricemap = []
          for (let j = 0; j < newarr.length; j++) {
            let index = this.addShowForm.pricemap.findIndex(item => {
              return item.price === newarr[j].price
            })
            this.addShowForm.pricemap[index].class = j
            newpricemap.push(this.addShowForm.pricemap[index])
          }
          this.addShowForm.pricemap = newpricemap
        } else if (oldarr.length < arr.length) {
        // 情况2如果新输入的值比之前存入的值要长，那么我们是输入了一个新的价格
          console.log('添加了新的价格等级')
          // 创建新的price，并且传递给showinfo
          for (let i = 0; i < arr.length; i++) {
            let newprice = {}
            newprice.class = i
            newprice.price = arr[i]
            newarr.push(newprice)
          }
          this.addShowForm.priceRange = newarr
          // console.log(newarr)
          // 根据这个newarr来生成新的pricemap
          let newpricemap = []
          // 先把价格相同的数据拿出来重新设定等级
          for (let j = 0; j < newarr.length; j++) {
            let index = this.addShowForm.pricemap.findIndex(item => {
              return item.price === newarr[j].price
            })
            let newmap = {}
            newmap.class = j
            // console.log(index)
            if (index !== -1) {
            // 当前价位是存在于之前的价格数据中的，那就要修改之前pricemap的class等级数据
              newmap.price = this.addShowForm.pricemap[index].price
              newmap.id = this.addShowForm.pricemap[index].id
              newpricemap.push(newmap)
            } else {
            // 如果这个数据不存在于之前的pricemap中，就要新建一个等级数据
              newmap.price = newarr[j].price
              newmap.id = []
              newpricemap.push(newmap)
            }
          }
          this.addShowForm.pricemap = newpricemap
        } else {
        // 这里是第3种情况，前后两次数组的长度不变，但是内容改变了
        // console.log(arr, oldarr)
        // 此时2个数组的长度都没有变化，只需要判断同位置的价格是否相等然后处理即可
          for (let i = 0; i < arr.length; i++) {
            if (arr[i] !== oldarr[i]) {
              this.addShowForm.pricemap[i].price = arr[i]
            }
          }
        }
        // 计算出价格区间字符串
        this.addShowForm.price = `${this.addShowForm.priceRange[0]['price']}-${this.addShowForm.priceRange[this.addShowForm.priceRange.length - 1]['price']}`
      } else {
        // console.log('pricerange为空')
        this.addShowForm.priceRange = []
        this.addShowForm.pricemap = []
      }
    },
    // 在input有的时候就要，保存之前的价格数据
    getoldpricearr () {
      // console.log('保存老数据')
      this.oldShowPrice = this.showPrice
    },
    // 将传入的字符串里的中文逗号转换成英文逗号
    replaceprice () {
      this.showPrice = this.showPrice.replace(/，/ig, ',')
    },
    // 将级联选择器的数据处理成对应数据
    gettheater () {
      this.addShowForm.theater = this.hall[0]
      let theaterindex = this.locations.findIndex(item => {
        return item.value === this.hall[0]
      })
      this.addShowForm.theaterName = this.locations[theaterindex]['label']
      this.addShowForm.hall = this.locations[theaterindex].children[this.hall[1]]['label']
      // 要根据选择的演出厅来显示座位图
      // this.$axios.post('http://localhost:3033/addshowseatmap', {
      //   'path': this.hall[0],
      //   'id': this.hall[1]
      // })
      postshowseatmap(this.hall[0], this.hall[1]).then(res => {
        this.seatMapSize = 0
        this.seatSize = ''
        console.log(res.data)
        this.hallInfo = res.data.hallData
        this.$nextTick(() => {
          // console.log(this.hallInfo.hallWidth)
          this.seatMapSize = this.$refs.addShowFormRef.$el.offsetWidth - 18
          this.seatSize = this.seatMapSize / this.hallInfo.hallWidth + 'px'
          console.log(this.seatSize)
        })
      })
    },
    // 获取级联选择框的数据
    getlocation () {
      // this.$axios.get('http://localhost:3033/getlocation')
      getLocations().then(res => {
        this.locations = res.data.location
      })
    },
    // 对话框打开完成之后获取当前对话框宽度数据
    getseatmapwidth () {
      // offsetWidth 包括padding和边框要自己减掉
      console.log(this.seatMapSize)
    },
    // 这里的显示标识符是props必须通过通信来通知父组件更改
    closedialog () {
      // 需要向后台推送添加数据
      // this.$axios.post('http://localhost:3033/addnewshow', this.addShowForm)
      postnewshowinfo(this.addShowForm).then(res => {
        console.log(res.data)
        // this.addShowForm = {}
      })
      this.$emit('closeAddShowDialog')
      this.canaddshowinfo = false
    }
  },
  created () {
    this.getlocation()
  }
}
</script>

<style lang='stylus' scoped>
.hallmask
  padding-top 40px
  width 100%
  font-size 80px
  text-align center
  color #C0C4CC
</style>
